<template>
  <div>
    <h1>评论</h1>

    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="用户" prop="userNo">
        <el-input v-model="form.userNo"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" :rows="4" v-model="form.content" placeholder="请输入评论内容"></el-input>
      </el-form-item>
      <el-form-item prop="isAnonymous">
        <el-checkbox v-model="form.isAnonymous" true-label="1" false-label="0">匿名提交</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitComment" :loading="isSubmitting">提交评论</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>

    <ul class="comment-list">
      <li v-for="(item, index) in comments" :key="index">
        {{ item.isAnonymous === 1 ? '匿名' : item.userNo }} : {{ item.content }} --> {{ item.isAnonymous }}
      </li>
    </ul>

    <el-button @click="getData">测试123</el-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Comment',
  axios: {},
  components: {},
  data() {
    return {
      form: {
        userNo: '',
        content: '',
        isAnonymous: 0
      },
      // isAnonymous: '',
      rules: {
        content: [
          {required: true, message: '请输入评论内容', trigger: 'blur'}
        ],
      },
      // userNo: '',
      // content: '',
      isSubmitting: false,
      comments: [
        {
          id: 1,
          parentId: '',
          replyCommentId: '',
          replyUserNo: '',
          userNo: '张三',
          content: '这是一条评论',
          isAnonymous: 0
        },
        {
          id: 2,
          parentId: '',
          replyCommentId: '',
          replyUserNo: '',
          userNo: '李四',
          content: '这是另一条评论',
          isAnonymous: 1
        },
        {
          id: 3,
          parentId: '',
          replyCommentId: '',
          replyUserNo: '',
          userNo: '老六',
          content: '这是另一条评论',
          isAnonymous: 1
        }
      ],
    }
  },
  mounted() {

  },
  methods: {
    submitComment() {
      if (!this.form.content) {
        this.$message.error('评论内容不能为空')
        return
      }

      // 未选中状态，值为空时，返回0
      if (!this.form.isAnonymous) {
        this.form.isAnonymous = 0;
      }

      this.isSubmitting = true
      setTimeout(() => {
        // this.comments.unshift(this.content)
        this.comments.push({userNo: this.form.userNo, content: this.form.content, isAnonymous: this.form.isAnonymous})

        this.form.userNo = ''
        this.form.content = ''
        this.form.isAnonymous = ''
        this.isSubmitting = false
      }, 100)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async getData() {
      this.$axios
        .get('http://localhost:8082/getA', {})
        .then((res) => {
          console.log(res, 'res');
        })
      console.log('123')
    }
  }
}
</script>

<style scoped>
.comment-list {
  list-style: none;
  padding: 0;
}
</style>
